<mat-toolbar *ngIf="isMobile" class="mobile-toolbar">
  <button mat-icon-button (click)="uponOpened.emit()" aria-label="Menu">
    <mat-icon>menu</mat-icon>
  </button>
  <div class="misc-controls">
    <button
      aria-label="Settings"
      mat-icon-button
      (click)="openSettings()"
    >
      <mat-icon>settings</mat-icon>
    </button>

    <button
      aria-label="Toggle queue"
      mat-icon-button
      (click)="toggleQueue()"
      [ngClass]="{'active-link': queueVisible}"
    >
      <mat-icon>queue_music</mat-icon>
    </button>
  </div>
</mat-toolbar>

<mat-toolbar class="outer-container">
  <div class="track-info">
    <div
      *ngIf="(playerService.nowPlayingItem.assets[0] && playerService.nowPlayingItem.assets[0].metadata.playlistId)"
      class="album-artwork linkable"
      [routerLink]="['/albums', playerService.nowPlayingItem.assets[0].metadata.playlistId]"
      [ngStyle]="{'background-image':'url('+(playerService.nowPlayingItem.artworkURL | formatArtworkUrl:60)+')'}"
    >
    </div>
    <div
      *ngIf="!(playerService.nowPlayingItem.assets[0] && playerService.nowPlayingItem.assets[0].metadata.playlistId)"
      class="album-artwork"
      [ngStyle]="{'background-image':'url('+(playerService.nowPlayingItem.artworkURL | formatArtworkUrl:60)+')'}"
    >
    </div>

    <div class="track-text">
      <div class="track-title">{{playerService.nowPlayingItem.title}}</div>
      <div class="track-artist">
        <span
          *ngIf="!(playerService.nowPlayingItem.assets[0] && playerService.nowPlayingItem.assets[0].metadata.artistId)"
        >
          {{playerService.nowPlayingItem.artistName}}
        </span>
        <span
          *ngIf="(playerService.nowPlayingItem.assets[0] && playerService.nowPlayingItem.assets[0].metadata.artistId)"
          class="linkable"
          [routerLink]="['/artists', playerService.nowPlayingItem.assets[0].metadata.artistId]"
        >
          {{playerService.nowPlayingItem.artistName}}
        </span>
      </div>
    </div>
  </div>
  <div class="playback-controls">

    <div class="playback-buttons">
      <!-- <button
        mat-icon-button
        [style.color]="playerService.isShuffling ? '#69f0ae' : ''"
        (click)="playerService.toggleShuffle()"
      >
        <mat-icon>shuffle</mat-icon>
      </button> -->

      <button
        aria-label="Skip previous"
        mat-icon-button
        (click)="skipToPreviousItem()"
        [disabled]="isLoading"
        *ngIf="!isMobile"
      >
        <mat-icon>skip_previous</mat-icon>
      </button>

      <button
        aria-label="Toggle play"
        mat-icon-button
        (click)="togglePlayPause()"
        *ngIf="!isLoading"
      >
        <mat-icon>{{playerService.playbackState === playbackStates.PLAYING ? 'pause' : 'play_arrow'}}</mat-icon>
      </button>

      <mat-spinner class="spinner" *ngIf="isLoading" diameter="20"></mat-spinner>

      <button aria-label="Skip next" mat-icon-button (click)="skipToNextItem()" [disabled]="isLoading">
        <mat-icon>skip_next</mat-icon>
      </button>

      <!-- <button
        mat-icon-button
        [style.color]="playerService.repeatMode !== 0 ? '#69f0ae' : ''"
        (click)="playerService.toggleRepeat()"
      >
        <mat-icon>{{playerService.repeatMode === 1 ? 'repeat_one' : 'repeat'}}</mat-icon>
      </button> -->
    </div>
    <div class="scrubber" *ngIf="!isMobile">
      <span class="time">{{currentPlaybackTime | formatSeconds }}</span>
      <mat-slider #slider
        [disabled]="currentPlaybackDuration === 0 || isLoading"
        class="slider"
        min="0"
        max="{{currentPlaybackDuration}}"
        step="1"
        value="{{currentPlaybackTime}}"
        (change)="seekToTime($event.value)"
      >
      </mat-slider>
      <span class="time">{{playerService.nowPlayingItem.playbackDuration | formatMilliseconds}}</span>
    </div>

  </div>
  <div class="misc-controls" *ngIf="!isMobile">
    <button
      aria-label="Settings"
      mat-icon-button
      (click)="openSettings()"
    >
      <mat-icon>settings</mat-icon>
    </button>

    <button
      aria-label="Toggle queue"
      mat-icon-button
      (click)="toggleQueue()"
      [ngClass]="{'active-link': queueVisible}"
    >
      <mat-icon>queue_music</mat-icon>
    </button>

    <button
      aria-label="Toggle mute"
      mat-icon-button
      (click)="toggleMute(volume.value)"
    >
      <mat-icon>{{volume.value ? 'volume_up' : 'volume_off'}}</mat-icon>
    </button>
    <mat-slider
      #volume
      class="volume-slider"
      min="0"
      max="10"
      step=".1"
      value="10"
      (input)="changeVolume($event.value)"
    >
    </mat-slider>
  </div>
</mat-toolbar>

<app-queue
  (uponClose)="toggleQueue()"
  *ngIf="queueVisible"
>
</app-queue>